import React from 'react'
import { Toast,NavBar  } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import "../../scss/jjt/ReservationRecord.scss"
import { Typography } from 'react-vant';
import {  Steps } from 'react-vant';
import IconFont from "../publics/JjtIcon";
import { useSelector ,useDispatch} from 'react-redux';
import axios from 'axios';
import { useState } from 'react';
import { useEffect } from 'react';
import { toitem } from '../../store/Num';
//预约记录
export default function Reservationrecord() {
    let navigate = useNavigate();
    let item = useSelector((state) => state.Num.item);
    console.log(item);
    let sure = async (item) => {
        console.log(item,2222222222);
        
        let obj = {...item}
        obj.time3 = new Date()
        obj.time4 = new Date()
        obj.yue_status = 2
        obj.appointstatus = 1
        // obj.hid.house_status = 1
        await axios.post("http://localhost:3000/jjt/editAppointment",obj)
        navigate("/appointmentrecord4")
    }
  return (
    <div className='reservationrecord'>
        <div className='reservationrecord1'>
            <NavBar
            title="预约看房"
            // leftText="返回"
            // rightText={<SettingO/>}
            onClickLeft={() => {navigate("/appointmentrecord4")}}
            onClickRight={() => Toast('按钮')}
            />
        </div>
        <div className='reservationrecord2'>
            <div className='reservationrecord2con1'>
                <img src={require("../../staticfile/userimg.jpg")} alt="" />
            </div>
            <div className='reservationrecord2con2'>
                <div className='reservationrecord2con2p1'>
                    <Typography.Text ellipsis className='reservationrecord2con2p1con'>{item.hid.classfy} | {item.hid.city}，{item.hid.describe}</Typography.Text>
                </div>
                <p className='reservationrecord2con2p2'>
                    <span>{item.hid.house_type.split("/")[0]} · {item.hid.plot} · {item.hid.name}</span>
                </p>
                <p className='reservationrecord2con2p3'>
                    <span>{item.hid.price}元/月</span>
                </p>
            </div>
        </div>
        <div className='reservationrecord3'>
            <div className='reservationrecord3left'>
                <img src="./logo192.png" alt="" />
                <div className='reservationrecord3div'>
                    <p className='reservationrecord3divp1'>{item.person}</p>
                    <p className='reservationrecord3divp2'>预约人</p>
                </div>
            </div>
            <div className='reservationrecord3right'>
            <IconFont type={"icon-shouji"} style={{fontSize:"18px",color:"gray",}}></IconFont>
                <p>{item.phone}</p>
            </div>
        </div>
        <div className='reservationrecord4'></div>
        <div className='reservationrecord5'>
            <p className='reservationrecord5p'>预约信息</p>
            {
                item.yue_status !==3 && <div className='reservationrecord5con'>
                <div className='reservationrecord5conleft'>
                <IconFont type={"icon-wancheng"} style={{fontSize:"21px",position:"relative",zIndex:"5"}} className={item.time4?"iconact":""}></IconFont>
                </div>
                <div  className='reservationrecord5conright'>
                    <p className='reservationrecord5conright1'>
                        预约已完成
                        
                    </p>
                    <p className='reservationrecord5conright2'>
                    {item.time4?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservationrecord5conright3'>感谢您使用客心app</p>
                </div>
            </div>
            }
            
            {
                item.yue_status !==3 && <div className='reservationrecord5con'>
                <div className='reservationrecord5conleft'>
                <IconFont type={"icon-fangchan-"} style={{fontSize:"25px",position:"relative",zIndex:"5"}} className={item.time3?"iconact":""}></IconFont>
                </div>
                <div  className='reservationrecord5conright'>
                    <p className='reservationrecord5conright1'>
                        租客已看房
                        
                    </p>
                    <p className='reservationrecord5conright2'>
                    {item.time3?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservationrecord5conright3'>您已到达房源看房</p>
                </div>
            </div>
            }
           
            {
                item.yue_status===3?
                <div className='reservationrecord5con'>
                <div className='reservationrecord5conleft'>
                <IconFont type={"icon-accepted-task"} style={{fontSize:"20px",position:"relative",zIndex:"5"}} className={item.time2?"iconact":""}></IconFont>
                </div>
                <div  className='reservationrecord5conright'>
                    <p className='reservationrecord5conright1'>
                        已拒绝
                        
                    </p>
                    <p className='reservationrecord5conright2'>
                    {item.time2?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservationrecord5conright3'>房东已接受预约，请按约看房</p>
                </div>
            </div>
                :
                <div className='reservationrecord5con'>
                <div className='reservationrecord5conleft'>
                <IconFont type={"icon-accepted-task"} style={{fontSize:"20px",position:"relative",zIndex:"5"}} className={item.time2?"iconact":""}></IconFont>
                </div>
                <div  className='reservationrecord5conright'>
                    <p className='reservationrecord5conright1'>
                        已接受
                        
                    </p>
                    <p className='reservationrecord5conright2'>
                    {item.time2?item.start_time.split("T")[0]:"------------"}
                        
                    </p>
                    <p className='reservationrecord5conright3'>房东已接受预约，请按约看房</p>
                </div>
            </div>
            }
            
            <div className='reservationrecord5con'>
                <div className='reservationrecord5conleft'>
                <IconFont type={"icon-faqiyuyue1"} style={{fontSize:"25px",position:"relative",zIndex:"5"}} className={item.hid.add_time?"iconact":""}></IconFont>
                </div>
                <div  className='reservationrecord5conright'>
                    <p className='reservationrecord5conright1'>
                        租客发起预约
                        
                    </p>
                    <p className='reservationrecord5conright2'>
                        {item.hid.add_time.split("T")[0]}
                        
                    </p>
                    <p className='reservationrecord5conright3'>预约时间</p>
                </div>
            </div>
            <div className='style'></div>
            <div className='reservationrecord5bot'>
                <div className='reservationrecord5botright'>
                {/* <IconFont type={"icon-yuyue1"} style={{fontSize:"35px",color:"gray"}}></IconFont> */}
                {/* <p>再次预约</p> */}
                <button>更改看房时间</button>
                </div>
                <div className='reservationrecord5botright'>
                    <button onClick={()=>{sure(item)}}>确认已看房</button>
                </div>
            </div>
        </div>
    </div>
  )
}
